<template lang="html">
 <panel class="panel" title="In货推荐">
   <section :class="$style.content">
        <div class="item" v-for=" item in items" :key="item.catory"  >
          <img  class="img1"  :src="item.catory"  />
           <section class="list">   <!--  主要是设置了list 使每一个products的宽度为50%  -->
            <div class="product"  v-for="product in item.list" :key="product.title" > 
              <img class="img2" :src="product.img" />
              <p style="color:black ; font-size: 17px " >{{product.title}}</p>
              <p>¥<em style="color:red ;font-size: 15px " >{{product.price}}</em>起</p>
              <el-progress :percentage="product.progress"></el-progress>
              <article>
                <div class="wrapper">
                  <div class="inner"></div>
                </div>
              </article>
            </div>
          </section>
        </div>

        

   </section>
 </panel>
   

</template>



<style lang="scss" module>
@import "../css/element.scss" ;

   .img1{
     width: 100%;
   }
   .img2{
     width: 100px;
     height:100px;
   }


</style>


<script>
import panel from "../smallzj/panel.vue"
export default {
    components: {
        panel,
    },
    data() {
        return {
          items: [{
                catory: "//img12.360buyimg.com/jrpmobile/jfs/t3406/210/2247820735/50952/86016eea/5846d8e7N20446dbd.png?width=750&height=200",
                list: [{
                    img: 'https://img30.360buyimg.com/cf/s250x250_jfs/t14881/283/656508232/143980/9b606acf/5a33a171N18c9c80a.jpg',
                    title: "双响炮蓝牙音箱",
                    price: "29.00",
                    progress:"68"
                    
                }, {
                    img: "https://img30.360buyimg.com/cf/s250x250_jfs/t15529/308/632300625/135123/adb9c6d0/5a37676dNc31da9ea.jpg",
                    title: "脑波相机",
                    price: "998.00",
                    progress:"79"
                    
                }],
            }, {
                catory: "//img12.360buyimg.com/jrpmobile/jfs/t3739/82/2244582797/54399/746c7d79/5846a953N66b67d05.png?width=750&height=200",
                list: [{
                    img: "https://img30.360buyimg.com/cf/s250x250_jfs/t11257/287/2281727659/55759/e00b90a/5a138f21N32dca834.jpg",
                    title: "智能电动牙刷",
                    price: "19.00",
                    progress:"83"
                   
                }, {
                    img: "https://img30.360buyimg.com/cf/s250x250_jfs/t14209/293/662014092/61635/bba5c330/5a33a983N077cac56.jpg",
                    title: "烟草加热电子烟",
                    price: "258.00",
                    progress:"95"
                    
                }],
            }, {
                catory: "//img12.360buyimg.com/jrpmobile/jfs/t3214/113/4408032436/61548/ce316eef/5846d310Ne93f00c9.png?width=750&height=200",
                list: [{
                    img: "https://img30.360buyimg.com/cf/s250x250_jfs/t15007/47/884045069/149879/17987250/5a3cb182N15868ea1.jpg",
                    title: "赖公高淮封藏老酒",
                    price: "99.00",
                    progress:"59"
                    
                }, {
                    img: "https://img30.360buyimg.com/cf/s250x250_jfs/t14197/160/546457496/134173/4e1baccd/5a30ccc5Na44f7492.jpg",
                    title: "泗洪花雕醉蟹",
                    price: "58.00",
                    progress:"99"
                   
                }],
            }],
           
        }
    },
}
</script>

 